<%@page import="cn.util.Const"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页</title>
<link href="<%=Const.ROOT %>admin/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=Const.ROOT %>admin/css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="<%=Const.ROOT %>admin/js/jconfirm/jquery-confirm.min.css">
<link href="<%=Const.ROOT %>admin/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">

    <%@include file="inc/aside.jsp" %>
    <%@include file="inc/header.jsp" %>
    
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                <form class="pull-right search-bar" method="post" action="<%=Const.ROOT %>goods/admin/list" role="form" id="searchForm">
                  <input type="hidden" name="pageNo" id="pageNo"/>
                  <div class="input-group">
                    <input type="text" class="form-control" value="${name}" name="name" placeholder="请输入名称">
					<div class="input-group-btn">
					  <input type="hidden" name="search_field" id="search-field" value="title">
					  <button class="btn btn-default dropdown-toggle" id="search-btn" type="submit" aria-haspopup="true" aria-expanded="false">
						<i class="mdi mdi-search-web"></i> 搜索
					  </button>
					</div>
                  </div>
                </form>
                <div class="toolbar-btn-action">
                  <button class="btn btn-primary m-r-5" onclick="add()"><i class="mdi mdi-plus"></i> 新增</button>
                </div>
              </div>
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>编号</th>
                        <th>分类</th>
                        <th>名称</th>
                        <th>图片</th>
                        <th>销量</th>
                        <th>点赞数</th>
                        <th>库存</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${pageInfo.list }" var="v" varStatus="st">
                      <tr>
                        <td>${st.count }</td>
                        <td>${v.kind.name }</td>
                        <td>${v.name }</td>
                        <td><a href="<%=Const.ROOT %>download?filename=${v.pic }" target="_blank"><img src="<%=Const.ROOT %>images/${v.pic }" style="ma-width:100px;max-height:60px"/></a></td>
                        <td>${v.xiao }</td>
                        <td>${v.zan }</td>
                        <td>${v.kucun }</td>
                        <td>
                          <div class="btn-group">
                            <button class="btn btn-xs btn-default" onclick="update(${v.id})" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></button>
                            <button class="btn btn-xs btn-default" onclick="del(${v.id})" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></button>
                          </div>
                        </td>
                      </tr>
                      </c:forEach>
                    </tbody>
                  </table>
                </div>
                <ul class="pager">
                  <li><a href="javascript:goPage(${pageInfo.prePage })">上一页</a></li>
                  <li><a href="javascript:goPage(${pageInfo.nextPage })">下一页</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
	  </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>

<!--新增-->
 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:950px;">
	<form class="form-horizontal" action="<%=Const.ROOT %>goods/admin/add" method="post">
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title">新增</h4>
	  </div>
	  <div class="modal-body">
		<div class="form-group">
		  <label class="col-md-2 control-label">商品分类</label>
		  <div class="col-md-9">
		    <select class="form-control" name="kid" id="kid1" required></select>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">名称</label>
		  <div class="col-md-9">
		    <input class="form-control" type="text" name="name" placeholder="请输入名称" required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">图片</label>
		  <div class="col-md-9">
		    <input class="form-control" type="file" id="file1" name="file" placeholder="请选择文件 " required onchange="uploadFile1()">
		    <input type="hidden" name="pic" id="pic1" />
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">单价</label>
		  <div class="col-md-9">
		    <input class="form-control" type="number" min="0" name="price" placeholder="请输入单价" required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">库存</label>
		  <div class="col-md-9">
		    <input class="form-control" type="number" min="0" name="kucun" placeholder="请输入库存" required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">商品描述</label>
		  <div class="col-md-9">
		  	<div id="editor1"></div>
		  	<input type="hidden" name="content" id="content1"/>
		  </div>
		</div>
	  </div>
	  <div class="modal-footer">
		<button type="submit" class="btn btn-primary">保存</button>
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	  </div>
	</div>
	</form>
  </div>
</div>
<!--修改-->
 <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:950px;">
	<form class="form-horizontal" action="<%=Const.ROOT %>goods/admin/update" method="post">
	<input type="hidden" name="id" id="v_id"/>
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<h4 class="modal-title">修改</h4>
	  </div>
	  <div class="modal-body">
		<div class="form-group">
		  <label class="col-md-2 control-label">商品分类</label>
		  <div class="col-md-9">
		    <select class="form-control" name="kid" id="kid2" required></select>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label" for="example-hf-email">名称</label>
		  <div class="col-md-9">
		    <input class="form-control" type="text" id="v_name" name="name" placeholder="请输入名称 " required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">图片</label>
		  <div class="col-md-9">
		    <input class="form-control" type="file" id="file2" name="file" placeholder="请选择文件 " onchange="uploadFile2()">
		    <input type="hidden" name="pic" id="pic2" />
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">单价</label>
		  <div class="col-md-9">
		    <input class="form-control" type="number" min="0" id="v_price" name="price" placeholder="请输入单价" required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">库存</label>
		  <div class="col-md-9">
		    <input class="form-control" type="number" min="0" id="v_kucun" name="kucun" placeholder="请输入库存" required>
		  </div>
		</div>
		<div class="form-group">
		  <label class="col-md-2 control-label">商品描述</label>
		  <div class="col-md-9">
		    <div id="editor2"></div>
		  	<input type="hidden" name="content" id="content2"/>
		  </div>
		</div>
	  </div>
	  <div class="modal-footer">
		<button type="submit" class="btn btn-primary">保存</button>
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	  </div>
	</div>
	</form>
  </div>
</div>

<script type="text/javascript" src="<%=Const.ROOT %>admin/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=Const.ROOT %>admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=Const.ROOT %>admin/js/perfect-scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>admin/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="<%=Const.ROOT %>admin/js/main.min.js"></script>
<script type="text/javascript" src="<%=Const.ROOT %>admin/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="<%=Const.ROOT %>wangEditor/wangEditor.js"></script>

<script type="text/javascript">
//创建编辑器对象
var E = window.wangEditor;
var editor1 = new E('#editor1');
//自定义菜单配置
editor1.customConfig.menus = [
'head',  // 标题
'bold',  // 粗体
'fontSize',  // 字号
'fontName',  // 字体
'italic',  // 斜体
'underline',  // 下划线
'strikeThrough',  // 删除线
'foreColor',  // 文字颜色
'backColor',  // 背景颜色
'link',  // 插入链接
'list',  // 列表
'justify',  // 对齐方式
'emoticon',  // 表情
'image',  // 插入图片
'table',  // 表格
'video'  // 插入视频
];
editor1.customConfig.onchange = function (html) {
    $("#content1").val(html);
};
editor1.customConfig.uploadFileName = 'file';
editor1.customConfig.uploadImgServer = <%=Const.ROOT%>+'upfile';
editor1.create();

var editor2 = new E('#editor2');
editor2.customConfig.onchange = function (html) {
  $("#content2").val(html);
};
editor2.customConfig.uploadFileName = 'file';
editor2.customConfig.uploadImgServer = <%=Const.ROOT%>+'upfile';
editor2.create();


$(function(){
	//ajax请求获取所有分类，json填充到下拉
	$.getJSON("<%=Const.ROOT %>kind/jsonlist",function(data){
		$("#kid1").html("<option value=''>请选择商品分类</option>");
		$("#kid2").html("<option value=''>请选择商品分类</option>");
		for(i=0;i<data.length;i++){
			$("#kid1").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
			$("#kid2").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
		}
	});
});

//ajax文件上传
function uploadFile1(){
	 if($("#file1").val()==""){
		  alert("请先选择文件!");
	  }else{
		  $.ajaxFileUpload(
	      {
	          url: '<%=Const.ROOT%>upload', //用于文件上传的服务器端请求地址
	          secureuri: false, //是否需要安全协议，一般设置为false
	          fileElementId: 'file1', //文件上传域的ID
	          success: function (data, status)  //服务器成功响应处理函数
	          {   
	        	  //如果文件上传成功，可以获取到文件名称,给pic隐藏域赋值
	        	  $("#pic1").val($(data).find("body").text());
	        	  alert("上传成功，请点击保存！");
	          },
	          error: function (data, status, e)//服务器响应失败处理函数
	          {
	              alert("上传失败!");
	          }
	      });
	  }
  return false;
}

//ajax文件上传
function uploadFile2(){
	 if($("#file2").val()==""){
		  alert("请先选择文件!");
	  }else{
		  $.ajaxFileUpload(
	      {
	          url: '<%=Const.ROOT%>upload', //用于文件上传的服务器端请求地址
	          secureuri: false, //是否需要安全协议，一般设置为false
	          fileElementId: 'file2', //文件上传域的ID
	          success: function (data, status)  //服务器成功响应处理函数
	          {   
	        	  //如果文件上传成功，可以获取到文件名称,给pic隐藏域赋值
	        	  $("#pic2").val($(data).find("body").text());
	        	  alert("上传成功，请点击保存！");
	          },
	          error: function (data, status, e)//服务器响应失败处理函数
	          {
	              alert("上传失败!");
	          }
	      });
	  }
  return false;
}

function add(){
	$("#addModal").modal("show");
}
function update(id){
	$.getJSON("<%=Const.ROOT %>goods/json",{"id":id},function(data){
		//ajax
		$("#updateModal #v_id").val(id);
		$("#updateModal #kid2").val(data.kid);
		$("#updateModal #v_name").val(data.name);
		$("#updateModal #pic2").val(data.pic);
		$("#updateModal #v_price").val(data.price);
		$("#updateModal #v_kucun").val(data.kucun);
		//$("#updateModal #v_content").val(data.content);
		editor2.txt.html(data.content);
		$("#updateModal").modal("show");
	});
}
function del(id){
	$.confirm({
		title: '提示信息',
		content: '是否删除?',
		type: 'orange',
		typeAnimated: false,
		buttons: {
			omg: {
				text: '确定',
				btnClass: 'btn-orange',
				action: function(){
					location.href="<%=Const.ROOT %>goods/admin/delete/"+id;
				}
			},
			close: {
				text: '取消',
			}
		}
	});
}
function goPage(pageNo){
	$("#pageNo").val(pageNo);
	$("#searchForm").submit();
}
</script>
</body>
</html>